<template>
  <el-row :gutter="20">
    <el-col :span="14" :xs="24">
        <!-- 列表 -->
        <ContentWrap class="mt-10px">
          <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
            <el-table-column label="序号" type="index"  width="60px" />
            <el-table-column align="center" label="废水种类" prop="wastewaterType">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.CRM_WASTEWATER_TYPE" :value="scope.row.wastewaterType" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="废水产生工序" prop="wastewaterGenerationProcess">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.CRM_WASTEWATER_GENERATION_PROCESS" :value="scope.row.wastewaterGenerationProcess" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="日排放量" prop="dailyEmissions"/>
            <el-table-column align="center" label="备注" prop="note"/>
          </el-table>
        </ContentWrap>
    </el-col>
    <!-- 右侧操作日志 -->
    <el-col :span="10" :xs="24">
      <OperateLogV2 :log-list="logList" />
    </el-col>
  </el-row>

</template>
<script lang="ts" setup>
import { EnvironmentApi,EnvironmentVO } from '@/api/crm/environment'
import { DICT_TYPE } from '@/utils/dict'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'

defineOptions({ name: 'EnvironmentWastewaterList' })
const { environment } = defineProps<{
  environment: EnvironmentVO
}>()

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => environment.id,
  async (val) => {
    if (!val) {
      loading.value = false
      return;
    }
    try {
      loading.value = true
      list.value = await EnvironmentApi.getEnvironmentWastewaterListByEnvironmentId(val)
      await getOperateLog()
    } finally {
      loading.value = false
    }
  },
  { immediate: true }
)

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!environment.id) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_ENVIRONMENT_WASTEWATER,
    bizId: environment.id
  })
  logList.value = data.list
}
</script>
